<template>
	<view>
		<view class="all" v-if="isC" @click="isC=false"></view>
		<!-- isC=!isC" -->
		<view class="qiu" :style="'transform: translate('+ x +'px,' + y +'px);'" :class="{chu:isC}" @click="toFb"  @touchstart="touchS" @touchmove.stop.prevent="touchM"  @touchend="touchE">
			<image :class="{zhuan:isC}" class="image" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/plus.png" mode=""></image>
		</view>
		<view class="model" :style="'transform: translate('+ x +'px,' + (y+52) +'px);'" :class="{model1:isC}">
			<view class="item"><view class="yuan" @click="topage('xsFb2')">投</view>投资项目</view>
			<view class="item"><view class="yuan" @click="topage('xsFb1')">招</view>招商项目</view>
			<view class="item"><view class="yuan" @click="topage('xsFb4')">企</view>产业合作</view>
			<view class="item"><view class="yuan" @click="topage('xsFb3')">供</view>供需撮合</view>
			<view class="item"><view class="yuan" @click="toFb">会</view>发布会议</view>
			<!-- <view class="item"><view class="yuan" @click="topage('fb')">园</view>园区入驻</view> -->
		</view>
		<xzw-centerPopup ref="centerPopup" title="提示" subTitle="该功能需要授权手机号后使用" @confirmClick="confirmClick" leftText="取消" rightText="确定"/>
	</view>
</template> 

<script>
	import xzwCenterPopup from '../../components/xzw-centerPopup/xzw-centerPopup.vue'
 import {GetUseInfo,UpdateUser} from '../../utils/api.js'
export default {
	data() {
		return {
			isC:false,
			start:{
				left:0,
				top:0
			},
			x:0,
			y:0,
			oldx:0,
			oldy:0,
		}
	},
	components:{xzwCenterPopup},
	methods: {
		wu(){
			uni.showToast({
				icon:'none',
				title:'功能开发中'
			})
		},
		topage(type){
			GetUseInfo().then(res=>{
				if(!res.data.mobile){
					this.$refs.centerPopup.open()
				}else{
					uni.navigateTo({
						url:`/pages/${type}/${type}`
					})
					uni.switchTab({
						url:`/pages/${type}/${type}`
					})
				}
			})
			this.isC=false
		},
		toFb(){
			if(!uni.getStorageSync('token')){
				uni.showModal({
					title:'提示',
					content:'需登录后方能发布会议',
					success: (res) => {
						if (res.confirm) {
							uni.switchTab({
								url:'/pages/my/my'
							})
							this.isC=false
						}
					}
				})
			}else{
				uni.navigateTo({
					url:'/pages/hyFb/hyFb'
				})
			}
		},
		show(){
			this.isC=true
		},
		touchS(val){
			this.isMove=true
			this.start.left = val.changedTouches[0].clientX 
			this.start.top = val.changedTouches[0].clientY 
		},
		touchM(val){
			if(this.isMove==false){
				return
			}
			this.x = this.oldx + val.changedTouches[0].clientX  - this.start.left 
			this.y = this.oldy + val.changedTouches[0].clientY  - this.start.top 
		},
		touchE(val){
			this.x=0
			
			this.oldx=this.x
			this.oldy=this.y
			this.isMove=false
		},
		phone(){
			uni.makePhoneCall({
					phoneNumber: '400-962-5108' //仅为示例
			});
		},
	}
};
</script>

<style scoped lang="scss">
.all{
	background-color: rgba($color: #000000, $alpha: 0.3);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
}
.qiu{
	position: fixed;
	top: 45%;
	right: 0px;
	width: 48px;
	height: 48px;
	z-index:99;
	border-radius: 24px;
	background:linear-gradient(135deg,#0091FF66 0%,#0091FF 100%);
	transition-property: right,top,height,width;
	transition-duration:0.5s;
	display: flex;
	justify-content: center;
	align-items: center;
	.image{
		width: 34px;
		height: 34px;
		transition: all 0.4s;
	}
}
.zhuan{
	transform: rotate(45deg);
	width: 24px !important;
	height: 24px !important;
}
.chu{
	right: calc(50% - 16px);
	top: 32%;
	z-index: 101;
	width: 32px;
	height: 32px;
}
.model{
	position: fixed;
	z-index: -1;
	opacity: 0;
	transition: all 0.5s;
	background: linear-gradient(150deg, #1F4F73 0%,#4A655E 100%);
	box-shadow: 2px 2px 8px 2px rgba($color: #1F4F73, $alpha: 0.5);
	border-radius: 10px;
	width: 70%;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	padding: 10px;
	left: calc(15% - 10px);
	top: 32%;
	color: #fff;
	text-align: center;
	font-size: 14px;
	.yuan{
		height: 36px;
		width: 36px;
		font-weight: 800;
		font-size: 16px;
		line-height: 36px;
		text-align: center;
		background-color: #ff9933;
		border-radius: 18px;
		margin-bottom: 4px;
		color: #333;
	}
	.item{
		width: 33%;
		margin: 10px 0;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
}
.model1{
	opacity: 1;
	z-index: 101;
}
</style>